<html>
<head>
    <title>滑动测试</title>
</head>
<body onselect="retrun false;" oncopy="return false;" onselectstart="return false;">
<script src="static/js/jquery.min.js"></script>
<div style="border:solid 1px red;position:absolute;left:400px;top:200px;width:354px;height:200px;">
    <div id="targetObj" style="border:solid 1px blud;background-color:red;width:44px;height:44px;position:absolute;left:10px;top:100px;"></div>
    <div id="srcObject" style="border:solid 1px blud;background-color:blue;width:44px;height:44px;position:absolute;left:50px;top:100px;"></div>
</div>
<script>
    (function(){
        var flag = false;
        var d=0,x=0,y=0,d1,x1,y1,ys;
        var xe = document.body;
        var se = document.getElementById("srcObject");
        var te = document.getElementById("targetObj");
        te.style.left = Math.random()*100+160;
        var line = "";
        xe.onmousedown = function(e){
            d = new Date().getTime();
            x = e.screenX;
            y = e.screenY;
            ys = y;
            flag = true;
        }
        xe.onmouseup = function(e){
            d1 = new Date().getTime();
            x1 = e.screenX;
            y1 = e.screenY;
            flag = false;
            var str = ",["+(x1-x) + "," + (y1-y) + "," + (y1-ys)+ "," + (d1-d)+","+(te.offsetLeft-se.offsetLeft)+"]";
            line += str;
            console.log(line);
            sendMessage(line);
            //console.log(str);
            line = "";
            str = "";
            d=0,x=0,y=0,d1=0,x1=0,y1=0;
            se.style.left = 50;
            te.style.left = Math.random()*100+160;
        }
        xe.onmousemove = function(e){
            if(flag){

                d1 = new Date().getTime();
                x1 = e.screenX;
                y1 = e.screenY;
                se.style.left = se.offsetLeft + (x1-x);
                var str = ",["+(x1-x) + "," + (y1-y) + "," + (y1-ys)+ "," + (d1-d)+"]";
                line += str;
                //console.log(str);
                //console.log(line);
                d = d1;
                x = x1;
                y = y1;
            }
        }
    })();
</script>
<script>
    function sendMessage(jsonData) {
        $.ajax({
            url: "http://localhost:8080/gee-data/gee/data",
            type: 'get',
            async: true,
            data: {
                jsonData : jsonData
            },
            dataType: 'json',
            success: function (data) {
                alert("ok");
            }
        });
    }
</script>
</body>
</html>
